<script setup>
import { ref, defineEmits, watchEffect, computed } from "vue";
const { proxy } = getCurrentInstance();
// 弄着玩
const show = ref(false);
/**
 *  list 枚举数据  [ { type:add,hasPermi:'system:user:add'} ]
 */
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  // 导入接口
  importUrl: {
    type: String,
    default: "",
  },
  //导入列表接口
  url: {
    type: String,
    default: "",
  },
  // 模板接口
  templateUrl: {
    type: String,
    default: "",
  },
});
provide("url", props.url); //导入列表接口
// 按钮 子穿父触发事件
const emit = defineEmits([
  // 新增
  "add",
  // 修改
  "edit",
  // 删除
  "remove",
  //分配用户
  "assign",
  // 导入
  "import",
  // 导出
  "export",
  "upFile",
  // 提交审核
  "sub-examine",
  // 撤销审核
  "revoke",
  // 审核
  "examine",
  // 打印
  "pring",
  // 关结
  "closing",
  // 交接
  "handover",
  // 入库
  "warehousing",
]);
console.log(props.list, "---sss");

// 导入绑定
const importShow = ref(false);

watchEffect(
  () => props.list,
  () => {
    console.log("sss");
  },
  {
    deep: true,
  }
);

const btnList = computed(() => {
  return props.list;
});

// 删除提示及回传
const remove = async () => {
  const result = await proxy.DelMessageBox("是否删除所选的数据?");
  if (!result) return;
  emit("remove");
};

// 提交审核
const examine = async () => {
  const result = await proxy.DelMessageBox("是否提交审核该数据?");
  if (!result) return;
  emit("sub-examine");
};

// 撤销审核
const revoke = async () => {
  const result = await proxy.DelMessageBox("是否撤销审核该数据?");
  if (!result) return;
  emit("revoke");
};
/**
 * 取消弹窗
 */
const close = () => {
  importShow.value = false;
  console.log("=====");
  emit("import");
};
watch(
  () => props.templateUrl,
  (val) => {
    const importFind = props.list.find((t) => t.type == "import");
    if (!val && importFind) {
      // proxy.errorMsg('p-button组件:请传入“templateUrl属性”,模板导出接口!')
      // throw 'p-button组件:请传入“templateUrl属性”,模板导出接口!'
    }
  },
  {
    deef: true,
    immediate: true,
  }
);

// 导入
const upLoad = () => {
  if (!props.importUrl) {
    proxy.errorMsg("p-button组件:请传入“importUrl”,导入接口!");
    return;
  }
  importShow.value = true;
  // emit("import");
};
</script>

<template>
  <el-row :gutter="10" class="mb8">
    <div v-for="(item, index) in props.list" :key="`${index}${item.disabled}`">
      <el-col :span="1.5" v-if="item.type == 'add'">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="emit('add')"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || "新增" }}</el-button
        >
      </el-col>
      <el-col :span="1.5" v-if="item.type == 'edit'">
        <el-button
          type="primary"
          plain
          icon="Edit"
          :disabled="item.disabled"
          @click="emit('edit')"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || "修改" }}</el-button
        >
      </el-col>
      <el-col :span="1.5" v-if="item.type == 'remove'">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="item.disabled"
          @click="remove"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || "批量删除" }}
        </el-button>
      </el-col>
      <el-col :span="1.5" v-if="item.type == 'import'">
        <el-button
          type="info"
          plain
          icon="Upload"
          @click="upLoad"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || "导入" }}</el-button
        >
      </el-col>
      <el-col :span="1.5" v-if="item.type == 'export'">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="emit('export')"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || "导出" }}</el-button
        >
      </el-col>
      <el-col :span="1.5" v-if="item.type == '提交审核'">
        <el-button
          type="warning"
          plain
          icon="Pointer"
          :disabled="item.disabled"
          @click="examine"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || "提交审核" }}</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5" v-if="item.type == '撤销审核'">
        <el-button
          type="warning"
          plain
          icon="RefreshLeft"
          :disabled="item.disabled"
          @click="revoke"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || '撤销审核' }}</el-button
        >
      </el-col> -->
      <el-col :span="1.5" v-if="item.type == '审核'">
        <el-button
          type="warning"
          plain
          icon="View"
          :disabled="item.disabled"
          @click="emit('examine')"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || "审核" }}</el-button
        >
      </el-col>
      <el-col :span="1.5" v-if="item.type == '关结'">
        <el-button
          type="primary"
          plain
          icon="View"
          :disabled="item.disabled"
          @click="emit('closing')"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || "关结" }}</el-button
        >
      </el-col>
      <el-col :span="1.5" v-if="item.type == '自定义'">
        <el-button
          :type="item.btnType || 'primary'"
          plain
          :icon="item.icon"
          :disabled="item.disabled"
          @click="emit(item.emit)"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || "自定义" }}</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5" v-if="item.type == '交接'">
        <el-button
          type="primary"
          plain
          icon="View"
          :disabled="item.disabled"
          @click="emit('handover')"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || '交接' }}</el-button
        >
      </el-col> -->

      <!-- <el-col :span="1.5" v-if="item.type == '入库'">
        <el-button
          type="primary"
          plain
          icon="View"
          :disabled="item.disabled"
          @click="emit('warehousing')"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || '入库' }}</el-button
        >
      </el-col> -->

      <!-- <el-col :span="1.5" v-if="item.type == '打印'">
        <el-button
          type="primary"
          plain
          icon="Document"
          :disabled="item.disabled"
          @click="emit('print')"
          v-hasPermi="[item.hasPermi]"
          >{{ item.label || '打印' }}</el-button
        >
      </el-col> -->
    </div>
    <p-import
      v-model="importShow"
      :templateUrl="props.templateUrl"
      :importUrl="props.importUrl"
      @close="close"
    />
    <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> -->
  </el-row>
</template>

<style>
.pay {
  text-align: center;
}
</style>
